<template>
  <div class="editWFProject">
    <!-- 瀑布式项目编辑弹层 -->
    <el-dialog
      :visible="showDialog"
      top="6%"
      title="编辑"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="98%"
      @open="onOpen"
      @close="onClose"
    >
      <div class="title">
        <div class="des">
          <el-select
            placeholder=""
            v-model="listdata.logo"
            popper-class="popper-select"
            :popper-append-to-body="false"
            @change="selectImg($event)"
          >
            <template slot="prefix">
              <img :src="listdata.logo" alt="" />
            </template>

            <el-option
              v-for="item in avatars"
              :key="item.Id"
              :label="item.src"
              :value="item.src"
            >
              <div class="proimg">
                <img class="avatar" :src="item.src" />
              </div>
            </el-option>
          </el-select>
          <!-- <img :src="listdata.logo" alt="" /> -->
          <div class="text">
            <p>{{ listdata.name }}</p>
            <span v-if="listdata.type === 1">瀑布式协作项目</span>
            <span v-else>软件敏捷开发项目</span>
          </div>
          <div
            class="level"
            :class="
              listdata.level <= 100
                ? 'LvOne'
                : listdata.level > 100 && listdata.level <= 200
                ? 'LvTwo'
                : 'LvThree'
            "
          >
            lv{{ listdata.level }}
          </div>
        </div>
        <div class="modify">
          <button class="cancel" @click="cancelEdit">取消</button>
          <button class="finish" @click="confirmEdit">完成</button>
        </div>
      </div>
      <div class="phase">
        <h3>项目阶段</h3>
        <ul class="steps" @click="changProjectPhase">
          <li
            :class="listdata.phase >= 1 ? 'active-select-li' : ''"
            data-index="1"
          >
            立项
          </li>
          <span :class="listdata.phase >= 2 ? 'active-select-span' : ''"></span>
          <li
            :class="listdata.phase >= 2 ? 'active-select-li' : ''"
            data-index="2"
          >
            计划
          </li>
          <span :class="listdata.phase >= 3 ? 'active-select-span' : ''"></span>

          <li
            :class="listdata.phase >= 3 ? 'active-select-li' : ''"
            data-index="3"
          >
            执行中
          </li>
          <span :class="listdata.phase >= 4 ? 'active-select-span' : ''"></span>

          <li
            :class="listdata.phase >= 4 ? 'active-select-li' : ''"
            data-index="4"
          >
            结项
          </li>
          <span :class="listdata.phase >= 5 ? 'active-select-span' : ''"></span>

          <li
            :class="listdata.phase >= 5 ? 'active-select-li' : ''"
            data-index="5"
          >
            完成项目
          </li>
        </ul>
      </div>
      <div class="infotable">
        <table cellpadding="0" cellspacing="0">
          <tr height="120">
            <td width="25%">
              <div class="missioner">
                <span>项目负责人:</span>
                <div v-if="getManagersList">
                  <div
                    class="missionerinfo"
                    v-for="item in getManagersList.slice(0, 1)"
                    :key="item.id"
                  >
                    <p v-if="item.roleName.length > 0">
                      <span>{{ item.roleName[0].rolename }}</span>
                    </p>
                    <p v-else>&nbsp;</p>
                    <img :src="item.avatar" alt="" />
                    <p>{{ item.name }}</p>
                  </div>
                </div>
                <img
                  class="choosemember"
                  @click="openSelectManage"
                  src="@/assets/missionerplus.png"
                  alt=""
                />
                <!-- 选择项目负责人 -->
                <!-- <el-dialog
                  :visible.sync="chooseMissioner"
                  :show-close="false"
                  :close-on-click-modal="false"
                  :close-on-press-escape="false"
                  :append-to-body="true"
                  center
                  top="8%"
                  width="90%"
                >
                  <div class="diaheader">选择项目负责人</div>
                  <div class="diacontentbox">
                    <div>
                      <h4
                        style="
                          font-size: 16px;
                          color: #333333;
                          margin-bottom: 14px;
                          margin-top: 0px;
                        "
                      >
                        已选项目负责人
                      </h4>
                      <div class="hadchoosenmembers">
                        <div
                          v-if="
                            !chargeRoleNameList.name &&
                            !chargeRoleNameList.avatar
                          "
                        >
                          暂无人员
                        </div>
                        <div v-else>
                          <div class="choosenmem" slot="reference">
                            <p>{{ chargeRoleNameList.roleName }}</p>
                            <img :src="chargeRoleNameList.avatar" alt="" />
                            <p style="color: #333333">
                              {{ chargeRoleNameList.name }}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="searchbox">
                      <h4
                        style="
                          font-size: 16px;
                          color: #333333;
                          margin: 14px 0px;
                        "
                      >
                        人员列表
                      </h4>
                      <div class="inputborder">
                        <input
                          type="text"
                          placeholder="搜索"
                          class="search"
                          style="border-radius: 25px"
                          v-model="searchPersonName"
                          @keyup.enter="searchPerson"
                        />
                        <i
                          class="el-icon-search icon"
                          @click="searchPerson($event)"
                        ></i>
                      </div>
                    </div>
                    <div class="diacontent" style="text-align: left">
                      <ul>
                        <li v-for="(item, index) in group" :key="index">
                          <img :src="item.avatar" alt="" />
                          <span class="itemName">{{ item.name }}</span>
                          <div
                            v-for="(role, index) in item.evaluationroleList"
                            :key="index"
                            :data-index="role.id"
                            ref="roleChange"
                            @click="selectRole($event, role)"
                          >
                            {{ role.name }}
                          </div>
                          <input
                            class="checkBoxs"
                            v-model="item.checked"
                            name="charge"
                            type="radio"
                            @change="getboxValue($event, item)"
                          />
                        </li>
                      </ul>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="close">取 消</el-button>
                    <el-button type="primary" @click="btnOk">确 定</el-button>
                  </span>
                </el-dialog> -->
              </div>
            </td>
            <td colspan="2" width="50%">
              <div class="missioner">
                <span>项目成员:</span>
                <div v-if="getMemberList">
                  <div
                    class="missionerinfo"
                    v-for="item in getMemberList.slice(0, 8)"
                    :key="item.id"
                  >
                    <p
                      v-if="
                        item.roleName.length > 0 && item.roleName.length < 2
                      "
                    >
                      {{ item.roleName[0].rolename }}
                    </p>
                    <template v-else-if="item.roleName.length === 0">
                      <p>&nbsp;</p>
                    </template>
                    <p v-else>多个角色</p>
                    <img :src="item.avatar" alt="" />
                    <p>{{ item.name }}</p>
                  </div>
                </div>
                <div
                  class="moremissioner"
                  v-if="getMemberList && getMemberList.length > 8"
                >
                  <span>等{{ getMemberList.length }}人</span>
                </div>
                <img
                  class="choosemember"
                  @click="openSelectMember"
                  src="@/assets/missionerplus.png"
                  alt=""
                />
              </div>
            </td>
            <td width="250%">
              <div style="display: flex; align-items: center">
                <span>项目进度及状态:</span>
                <div class="domany">
                  <el-progress
                    class="progressBox1"
                    :text-inside="true"
                    :stroke-width="20"
                    v-if="listdata.progress"
                    :percentage="Number(listdata.progress)"
                  ></el-progress>
                </div>
                <span class="manystatus notstart" v-if="listdata.status === 1"
                  >未开始</span
                >
                <span
                  class="manystatus completed"
                  v-else-if="listdata.status === 3"
                  >已完成</span
                >
                <span class="manystatus ongoing" v-else>进行中</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <span>项目组名称:</span>
              <input
                type="text"
                v-model="listdata.groupName"
                placeholder="请输入项目组名称"
                style="width: 70%"
                maxlength="25"
              />
            </td>
            <td colspan="2">
              <span>项目名称:</span>
              <input
                type="text"
                style="width: 80%"
                placeholder="请输入项目名称"
                v-model="listdata.name"
                maxlength="25"
              />
            </td>
            <td>
              <span>客户信息:</span>
              <input
                type="text"
                placeholder="请输入客户信息"
                v-model="listdata.clientInfo"
                maxlength="25"
              />
            </td>
          </tr>
          <tr>
            <td>
              <span>开始时间:</span>
              <el-date-picker
                @blur="handleProjectCycle"
                size="mini"
                v-model="listdata.startDate"
                align="right"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择项目开始日期"
              >
              </el-date-picker>
            </td>
            <td>
              <span>结束时间:</span>
              <el-date-picker
                size="mini"
                @blur="handleProjectCycle"
                v-model="listdata.endDate"
                align="right"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择项目结束日期"
              >
              </el-date-picker>
            </td>
            <td>
              <span>项目周期:</span>
              <span>{{ listdata.developmentPeriod }}</span>
            </td>
            <td>
              <span>过期：</span>
              <span>{{ listdata.day }}</span>
            </td>
          </tr>
          <tr v-if="userType === 1">
            <td>
              <span>项目编号:</span>
              <span>{{ listdata.code }}</span>
            </td>
            <td>
              <span>创建人:</span>
              <span v-for="(item, id) in getCreateList" :key="id"
                >{{ item.name }}&nbsp;&nbsp;&nbsp;</span
              >
              <img
                class="choosemember"
                @click="openCreated"
                src="@/assets/missionerplus.png"
                alt=""
                v-if="listdata.label !== 3"
              />
            </td>
            <td>
              <span>项目等级:</span>
              <input
                type="number"
                v-model="listdata.level"
                placeholder="请输入项目等级"
                oninput="if(value.length>3)value=value.slice(0,3)"
                @input="isTrueNum($event)"
              />
            </td>
            <td>
              <span>项目类型:</span>
              <span v-if="listdata.label === 2">自建</span>
              <span v-else-if="listdata.label === 3">复制</span>
              <span v-else-if="listdata.label === 1">模板</span>
            </td>
          </tr>
          <tr v-if="userType === 1">
            <td colspan="2">
              <span>评分表:</span>
              <el-select
                placeholder="请选择评分表"
                v-model="listdata.evaluationId"
                @change="selectEva"
                style="width: 30%"
              >
                <el-option
                  v-for="item in optionSelect"
                  :key="item.index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </td>
            <td colspan="2">
              <span>课时数:</span>
              <input
                type="number"
                v-model.number="listdata.hours"
                style="width: 60%"
                oninput="if(value.length>3)value=value.slice(0,3)"
                placeholder="请输入课时数"
                @input="$event;"
              />
            </td>
          </tr>
        </table>
      </div>
    </el-dialog>
    <selectManageRoleVue
      ref="child"
      @getManagerList="getManagerList"
    ></selectManageRoleVue>
    <SelectMembersVue
      ref="childMembers"
      @getMembersList="getMembersList"
    ></SelectMembersVue>
    <!-- <SelectCreater ref="childCreate" @getCreaters="getCreaters"></SelectCreater> -->

    <!-- 创建人选择弹层 -->
    <el-dialog :visible.sync="showDialog1" width="770" :show-close="false">
      <div class="roleBox">
        <el-transfer
          filterable
          :titles="['人员列表', '已选人员']"
          filter-placeholder="请输入名称"
          v-model="value"
          :data="data"
          :props="{
            key: 'id',
            label: 'name',
          }"
        >
        </el-transfer>
        <div class="btn">
          <button @click="cancel">取消</button>
          <button @click="sendRoleList">确定</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import selectManageRoleVue from '../changePerson/selectManageRole.vue';
import SelectMembersVue from '../changePerson/SelectMembers.vue';
import SelectCreater from '../changePerson/SelectCreater.vue';
import { updateProject, getSameUser, getTeachers } from '@/api/project/buildProject';
import { getevaluation } from '@/api/project/getevaluation';
import { getprodetail } from '@/api/project/prodetail';
export default {
  name: 'editWFProject',
  // 传入的数据
  props: {
    value1: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      data: [],
      value: [],
      showDialog1: false,
      // -----------------------------------------------------------
      showDialog: false,
      listdata: {},
      // 项目基础数据
      searchPersonName: '', // 模糊搜索人员名字
      userid: Number(sessionStorage.getItem('userid')),
      // 修改创建人时老师数组
      teachers: [],
      // 负责人选择弹窗
      chooseMissioner: false,
      // 已选负责人数据
      chargeRoleNameList: {
        name: '',
        avatar: '',
        id: '',
        roleName: '',
        evaluationroleid: null
      },
      // 新选择的负责人数据
      newchargeRoleNameList: {
        name: '',
        avatar: '',
        id: '',
        roleName: '',
        evaluationroleid: null
      },
      // 成员选择弹窗
      choosemembers: false,
      // 统一组织机构初始数据
      group: [],
      // 已选成员初始数据
      donemembers: [],
      // 新选择的成员数据
      newdonemembers: [],
      // 创建人选择弹窗
      chooseCreater: false,
      // 创建人数据
      createRoleNameList: [],
      // 新建人员数据集合
      addProjectUserDtoList: [],
      // 阶段
      editPhase: this.phase,
      // 评分表
      optionSelect: [],
      // 头像
      avatars: [
        {
          src: '/static/project1.png',
          Id: '0'
        },
        {
          src: '/static/project2.png',
          Id: '1'
        },
        {
          src: '/static/project3.png',
          Id: '2'
        },
        {
          src: '/static/project4.png',
          Id: '3'
        },
        {
          src: '/static/project5.png',
          Id: '4'
        }, {
          src: '/static/project6.png',
          Id: '5'
        }
      ],
      // 要修改的新数据
      newData:
      {
        addProjectUserDtoList: [],
        project: {
          clientinfo: null,
          enddate: '',
          evaluationid: null,
          groupname: '',
          createdid: null,
          id: 0,
          level: 1,
          // managerid: null,
          name: '',
          phase: null,
          startdate: '',
          hours: null
        }
        // },
        // projectuserList: [
        //   {
        //     createtime: '',
        //     evaluationroleid: null,
        //     id: null,
        //     projectid: null,
        //     rolename: '',
        //     type: null,
        //     userid: null
        //   }
        // ]

      },
      userType: 0,
      getMemberList: [], // 选择的成员
      getManagersList: [], // 选择的负责人
      changeManagerList: [], // 转换数据结构后的负责人
      changeMembersList: [], // 转换数据结构后的成员
      getCreateList: [], // 获取选择的创建人
      changeCreateList: [] // 转换数据结构的创建人
    };
  },
  created() {
    this.userType = Number(sessionStorage.getItem('usertype'));
  },
  emits: ['updateList'],
  methods: {
    // 打开编辑模态框
    openEdit() {
      this.getProjectDetail();
      this.getEvaluationList();
      // 评分表赋值
      this.value = this.listdata.evaluationroleid;
      this.showDialog = true;
    },
    // 获取评分表列表
    async getEvaluationList() {
      const res = await getevaluation(this.userid);
      console.log(res);
      this.optionSelect = res.data;
      // console.log(this.optionSelect);
    },
    // 项目周期
    handleProjectCycle() {
      // console.log(11);
      let time1 = Date.parse((this.listdata.startDate));
      let time2 = Date.parse((this.listdata.endDate));
      // console.log(time1, time2);
      if (time1 > time2) {
        this.$message({
          showClose: true,
          type: 'error',
          message: '结束时间不能在开始时间之前'
        });
        return;
      }
      let val = (time2 - time1) / 1000 / 3600 / 24;
      if (val > 0) {
        this.projectCycle = val + '天';
      }
    },
    // 获取详情
    async getProjectDetail() {
      const res = await getprodetail(Number(localStorage.getItem('projectId')), Number(sessionStorage.getItem('usertype')));
      console.log(res);
      this.listdata = res.data;
      this.getManagersList = res.data.managerList;
      this.getMemberList = res.data.groupUserName;
      this.getCreateList = res.data.createList;
      for (let i = 0; i < this.getCreateList.length; i++) {
        for (let j = i + 1; j < this.getCreateList.length; j++) {
          if (this.getCreateList[i].id === this.getCreateList[j].id) {
            this.getCreateList.splice(j, 1);
            j--;
          }
        }
      }
      // console.log('项目负责人', this.getManagersList);
      // console.log('项目成员', this.getMemberList);
      // console.log('创建人', this.getCreateList);
      // 将之前的数据转换为后端需要的结构，防止用户不选择丢失数据
      // 负责人
      this.changeManagerList = [];
      console.log(this.getManagersList);
      if (this.getManagersList.length > 0) {
        if (this.getManagersList[0].roleName.length > 0) {
        // console.log(role);
        // 成功转换后的负责人数组
          this.changeManagerList = [{projectuser: {type: 2, userid: this.getManagersList[0].id}, projectuserroleList: [{evaluationroleid: this.getManagersList[0].roleName[0].evaluationroleid, rolename: this.getManagersList[0].roleName[0].rolename}]}];
        } else { // 如果没选角色
          this.changeManagerList = [{projectuser: {type: 2, userid: this.getManagersList[0].id}, projectuserroleList: []}];
        }
      }
      console.log(this.changeManagerList);
      // 成员
      // 再将数据转换为后端需要的数据结构
      this.changeMembersList = [];
      this.getMemberList.forEach(item => {
        this.changeMembersList.push({projectuser: {type: 1, userid: item.id}, projectuserroleList: [], List: [...item.roleName]});
      });
      // console.log(this.changeMembersList);
      this.changeMembersList.forEach((item, index) => {
        item.List.forEach(ele => {
          item.projectuserroleList.push({
            'evaluationroleid': ele.evaluationroleid,
            'rolename': ele.rolename
          });
        });
      });
      this.changeMembersList.forEach(item => {
        delete item.List;
      });
      // console.log(this.changeMembersList);
      // 创建人
      // 将获取到的数据转换成后端需要的数据结构
      this.changeCreateList = []; // 把之前的赋值为空避免重复添加
      this.getCreateList.forEach(item => {
        this.changeCreateList.push({projectuser: {type: 3, userid: item.id}});
      });
      console.log(this.changeCreateList);
    },
    // 搜索人员
    searchPerson() {
      console.log('sousuo', this.searchPersonName);
      getSameUser(this.userid, Number(this.value), this.searchPersonName).then(res => {
        console.log(res);
        this.group = res.data;
      });
    },
    // 搜索老师
    searchTeacher() {
      console.log('sousuolaoshi', this.searchPersonName);
      getTeachers(this.searchPersonName).then(res => {
        console.log(res);
        this.teachers = res.data;
      });
    },
    // 选取项目头像
    selectImg(val) {
      console.log(val);
      this.listdata.logo = val;
      // this.$emit('update', this.value1);
    },
    // 选择评分表
    selectEva(e) {
      console.log(e);
      // this.value = e;
      this.listdata.evaluationId = e;
      // this.$emit('update', this.listdata.evaluationName);
    },
    // 判断输入数字等级
    isTrueNum(event) {
      if (event.target.value > 300 || event.target.value <= 0) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '请输入1-300的数字'
        });
        // event.target.value = 1;
        this.listdata.level = 300;
      } else if (event.target.value < 0) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '请输入1-300的数字'
        });
        this.listdata.level = 0;
      }
    },
    // 判断输入数字课时
    isTrueNum1(event) {
      // console.log(event.target.value);
      if (event.target.value > 1000 || event.target.value <= 0) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '请输入1-999的数字'
        });
        // event.target.value = 1;
        this.listdata.hours = null;
      }
    },
    // 负责人选择弹窗按钮
    getUser(userId) {
      this.chooseMissioner = true;
      this.value = this.listdata.evaluationId;
      // console.log(this.chargeRoleNameList, 'char');
      // console.log(this.listdata.managerList, 'manager');
      // 读取已选负责人信息
      if (this.listdata.managerList[0]) {
        this.chargeRoleNameList.name = this.listdata.managerList[0].name;
        this.chargeRoleNameList.avatar = this.listdata.managerList[0].avatar;
        this.chargeRoleNameList.id = this.listdata.managerList[0].id;
        this.chargeRoleNameList.roleNmae = this.listdata.managerList[0].roleNmae;
      }
      // 获取同一组织机构人员信息
      if (this.value === '') {
        getSameUser(userId).then(res => {
          // console.log(res.data);
          this.chooseMissioner = true;
          this.group = res.data;
          // 判断是否已经选择
          this.group.forEach(item => {
            if (this.chargeRoleNameList.id === item.id) {
              item.checked = true;
            }
          });
        });
      } else {
        getSameUser(userId, this.value).then(res => {
          // console.log(res.data);
          this.chooseMissioner = true;
          this.group = res.data;
          // 判断是否已经选择
          this.group.forEach(item => {
            if (this.chargeRoleNameList.id === item.id) {
              item.checked = true;
            }
          });
        });
      }
    },
    // 选择负责人角色
    selectRole($event, item) {
      // 将所有样式重置
      // console.log(item);
      this.$refs.roleChange.map(item => {
        item.className = 'sortable both';
      });
      // 选择角色单选
      if ($event.target.className === 'first') {
        $event.target.className = '';
      } else {
        $event.target.className = 'first';
      }
      // 选择角色推送进负责人数组
      this.chargeRoleNameList.roleName = item.name;
      this.chargeRoleNameList.evaluationroleid = item.id;
    },
    // 添加项目负责人
    getboxValue(e, item) {
      this.chargeRoleNameList.name = item.name;
      this.chargeRoleNameList.avatar = item.avatar;
      this.chargeRoleNameList.id = item.id;
      item.checked = true;
      // console.log('cahr', this.chargeRoleNameList);
    },
    // 负责人选择确定按钮
    btnOk() {
      this.chooseMissioner = false;
      let val = {
        projectuser: { type: 2, userid: this.chargeRoleNameList.id }, projectuserroleList: []
      };
      if (!this.chargeRoleNameList.evaluationroleid) {
        delete val.projectuserroleList;
      } else {
        val.projectuserroleList = [{ evaluationroleid: this.chargeRoleNameList.evaluationroleid, rolename: this.chargeRoleNameList.roleName }];
      }
      this.addProjectUserDtoList.push(val);
      console.log('负责人确认', this.addProjectUserDtoList);
    },
    // 负责人选择取消按钮
    close() {
      this.chooseMissioner = false;
    },
    // 项目成员选择弹窗按钮
    getUser1(userId) {
      this.choosemembers = true;
      // console.log(this.listdata, 'manager');
      this.donemembers = [...this.listdata.groupUserName];
      this.value = this.listdata.evaluationId;
      if (this.value1 === '') {
        getSameUser(userId).then(res => {
          console.log(res.data);
          this.choosemembers = true;
          this.group = res.data;
          this.donemembers.forEach(item => {
            if (item.checked === true) {
              this.group.forEach(item1 => {
                if (item1.id === item.id) {
                  item1.checked = true;
                }
              });
            }
          });
        });
      } else {
        getSameUser(userId, Number(this.value)).then(res => {
          console.log(res.data);
          this.choosemembers = true;
          this.group = res.data;
          // 循环
          this.donemembers.forEach(item => {
            if (item.checked === true) {
              this.group.forEach(item1 => {
                if (item1.id === item.id) {
                  item1.checked = true;
                }
              });
            }
          });
        });
      }
    },
    // 选择项目成员
    getboxValue1(e, item) {
      if (e.target.checked) {
        item.checked = true;
        this.donemembers.push(item);
      } else {
        const new1 = this.donemembers.filter(dm1 => {
          return dm1.id !== item.id;
        });
        this.donemembers = new1;
        // const new1 = this.donemembers.filter(dm1 => {
        //   return dm1.id !== item.id;
        // });
        // this.donemembers = new1;
      }
      if (item.evaluationroleList) {
        item.evaluationroleList.forEach(val => {
          if (val.checked === true) {
            console.log(val);
            item['roleName'] = val.name;
            item['evaluationroleid'] = val.id;
          }
        });
      }
    },
    // 选择项目成员角色
    selectRole1(role, item) {
      // item.checked = !item.checked;
      item.evaluationroleList.filter(item => {
        if (item.id === role.id) {
          // console.log(item);
          item.checked = !item.checked;
        } else {
          item.checked = false;
        }
      });
    },
    // 项目成员弹层确定
    btnOk1() {
      // this.newData.chargeid = this.chargeRoleNameList[0].userId;
      // this.choosemembers = false;
      // // console.log(this.addProjectUserDtoList, 'cehngyuan1');
      // this.addProjectUserDtoList.map((item, index) => {
      //   // console.log('进入', item, index);
      //   if (item.projectuser.type === 1) {
      //     // delete this.addProjectUserDtoList[index];
      //     this.$delete(this.addProjectUserDtoList, index);
      //     // console.log('删除', item, index);

      //     // console.log(index);
      //   }
      // });
      // console.log(this.addProjectUserDtoList, 'cehngyuan1');

      // let arr = this.addProjectUserDtoList.filter((item, index) => {
      //   console.log('进入', item, index);
      //   if (item.projectuser.type === 1) {
      //     // this.addProjectUserDtoList.splice(index, 1);
      //     delete this.addProjectUserDtoList[index];
      //     console.log('删除', item, index);
      //   }
      // });
      // this.addProjectUserDtoList = arr;
      this.choosemembers = false;
      // this.donemembers.forEach(item => {
      //   this.addProjectUserDtoList.push({ projectuser: { type: 1, userid: item.id }, projectuserroleList: [{ evaluationroleid: item.evaluationroleid, rolename: item.roleName }] });
      // });
      // console.log(this.addProjectUserDtoList, 'cehngyuan2');
      // this.donemembers.forEach(item => {
      //   this.addProjectUserDtoList.push({ projectuser: { type: 1, userid: item.id }, projectuserroleList: [{ evaluationroleid: item.evaluationroleid, rolename: item.roleName }] });
      // });
      // console.log(this.addProjectUserDtoList, 'cehngyuan');
    },
    // 成员选择取消按钮
    close1() {
      this.choosemembers = false;
    },
    // 创建人选择弹窗按钮
    getUser2() {
      this.chooseCreater = true;
    },
    // 创建人选择勾选
    getboxValue2(e, item) {
      if (e.target.checked) {
        item.checked = true;
        this.createRoleNameList.push(item);
      } else {
        // for (let i = 0; i < this.createRoleNameList.length; i++) {
        //   if (this.createRoleNameList[i].userId === item.userId) {
        //     this.createRoleNameList[i].checked = false;
        //     this.createRoleNameList.splice(i, 1);
        //     break;
        //   }
        // }
        const new1 = this.createRoleNameList.filter(dm1 => {
          return dm1.id !== item.id;
        });
        this.createRoleNameList = new1;
      }
      console.log('chuangjianren ', this.createRoleNameList);
    },
    // 创建人弹层确定
    btnOk2() {
      // this.newData.chargeid = this.chargeRoleNameList[0].userId;
      this.chooseCreater = false;
      this.listdata.createList = this.createRoleNameList;
      console.log('chauangjianren 1111', this.createRoleNameList);
      // this.createRoleNameList.forEach(item => {
      //   this.addProjectUserDtoList.push({ projectuser: { type: 3, userid: item.id } });
      // });
      // console.log(this.addProjectUserDtoList, 'cehngyuan');
    },
    // 创建人选择取消按钮
    close2() {
      this.chooseCreater = false;
    },
    // 打开关闭编辑弹层
    onOpen() { },
    onClose() {
      // 关闭对话框
      // this.$emit('update:showDialog', false);
      // this.showDialog = false;
    },
    // 取消编辑按钮
    cancelEdit() {
      this.$confirm('是否取消编辑?当前更改的内容将不会保存！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          showClose: true,
          type: 'success',
          message: '编辑内容已取消!'
        });
        this.showDialog = false;
        // this.$emit('updateList');
        // this.$emit('update:showDialog', false);
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '继续编辑'
        });
      });
    },
    // 确认按钮
    confirmEdit() {
      console.log('项目负责人', this.changeManagerList);
      console.log('项目成员', this.changeMembersList);
      console.log('创建人', this.changeCreateList);
      this.$confirm('是否完成编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.newData.addProjectUserDtoList = [...this.changeManagerList, ...this.changeMembersList, ...this.changeCreateList];
        this.newData.project.clientinfo = this.listdata.clientInfo;
        this.newData.project.enddate = this.listdata.endDate;
        this.newData.project.evaluationid = this.listdata.evaluationId;
        this.newData.project.groupname = this.listdata.groupName;
        this.newData.project.id = this.listdata.id;
        this.newData.project.level = this.listdata.level;
        this.newData.project.name = this.listdata.name;
        // this.newData.project.phase = this.listdata.phase;
        this.newData.project.startdate = this.listdata.startDate;
        this.newData.project.phase = this.listdata.phase;
        this.newData.project.hours = Number(this.listdata.hours);
        this.newData.project.createdid = this.listdata.createdId;
        this.newData.project.logo = this.listdata.logo;
        console.log(this.newData);
        let update = JSON.stringify(this.newData);
        updateProject(update).then(res => {
          console.log('修改保存成功', this.newData, res);
          if (res.code === 200) {
            this.$message({
              showClose: true,
              type: 'success',
              message: '修改内容已保存!'
            });
            this.$emit('updateList');
            this.showDialog = false;
            //     // 获取该项目详情
            //     getprodetail(Number(this.$route.params.projectId), Number(sessionStorage.getItem('usertype'))).then(res => {
            //       console.log(JSON.parse(JSON.stringify(res.data)));
            //       this.listdata = res.data;
            //       this.phase = res.data.phase;
            //       this.logList = res.data.logList;
            //     });
          } else {
            this.$message({
              showClose: true,
              type: 'warning',
              message: res.msg
            });
            // this.showDialog = false;
          }
        });
        // 关闭对话框
        this.$emit('update:showDialog', false);
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '继续编辑'
        });
      });
    },
    // 编辑时可修改项目状态
    changProjectPhase(e) {
      // console.log(e.target.dataset.index);
      this.listdata.phase = Number(e.target.dataset.index);
    },
    // 打开选择负责人的模态框
    openSelectManage() {
      console.log(this.getManagersList);
      this.$refs.child.openSelectRole(this.listdata.evaluationId, this.getManagersList);
    },
    // 获取用户选择的负责人
    getManagerList(val) {
      console.log(val);
      // 转换为渲染需要的结构
      let newVal = {avatar: '', id: 0, name: '', roleName: []};
      if (val.length > 0) {
        newVal.avatar = val[0].avatar;
        newVal.id = val[0].id;
        newVal.name = val[0].name;
        newVal.isSelect = val[0].isSelect;
        val[0].evaluationroleList.forEach(item => {
          if (item.checked === true) {
            newVal.roleName = [{evaluationroleid: item.id, rolename: item.name}];
          }
        });
        this.getManagersList = [{...newVal}];
      } else {
        this.getManagersList = [];
      }
      console.log(newVal);
      if (val.length > 0) {
        console.log(val);
        if (val[0].evaluationroleList.length > 0) {
          // console.log(val);
          this.changeManagerList = [{projectuser: {type: 2, userid: val[0].id}, projectuserroleList: []}];
          val[0].evaluationroleList.forEach(item => {
            if (item.checked === true) {
            // 成功转换后的负责人数组
              this.changeManagerList = [{projectuser: {type: 2, userid: val[0].id}, projectuserroleList: [{evaluationroleid: item.id, rolename: item.name}]}];
            }
          });
        } else { // 如果没选角色
          console.log(val);
          this.changeManagerList = [{projectuser: {type: 2, userid: val[0].id}, projectuserroleList: []}];
        }
      } else {
        this.changeManagerList = [];
      }
      // console.log(role);
      // // 成功转换后的负责人数组
      // this.changeManagerList = [{projectuser: {type: 2, userid: val[0].id}, projectuserroleList: [{evaluationroleid: role.id, rolename: role.name}]}];
      console.log(this.changeManagerList);
    },
    // 打开选择成员的模态框
    openSelectMember() {
      // groupUserName
      this.$refs.childMembers.openSelectMember(this.listdata.evaluationId, this.getMemberList);
    },
    // 获取用户选择的成员
    getMembersList(val) {
      console.log('接收到的数据', val);
      this.getMemberList = [];
      // 将选择的成员转换成显示需要的数据结构，方便用户再次点击选人的时候默认渲染
      val.forEach(item => {
        console.log(item);
        this.getMemberList.push({avatar: item.avatar, id: item.id, name: item.name, roleName: [], List: [...item.evaluationroleList]});
      });
      console.log(this.getMemberList);
      this.getMemberList.forEach(item => {
        item.List.forEach(ele => {
          if (ele.checked === true) {
            // console.log(ele);
            item.roleName.push({evaluationroleid: ele.id, rolename: ele.name});
          }
        });
      });
      // console.log(this.getMemberList);
      // 删除不用的List
      this.getMemberList.forEach(item => {
        delete item.List;
      });
      // console.log(this.getMemberList);
      // 再将数据转换为后端需要的数据结构
      this.changeMembersList = [];
      val.forEach(item => {
        this.changeMembersList.push({projectuser: {type: 1, userid: item.id}, projectuserroleList: [], List: [...item.evaluationroleList]});
      });
      console.log(this.changeMembersList);
      this.changeMembersList.forEach((item, index) => {
        item.List.forEach(ele => {
          if (ele.checked === true) {
            item.projectuserroleList.push({
              'evaluationroleid': ele.id,
              'rolename': ele.name
            });
          }
        });
      });
      this.changeMembersList.forEach(item => {
        delete item.List;
      });
      console.log(this.changeMembersList);
    },
    // 打开创建人模态框
    // openCreated() {
    //   this.$refs.childCreate.openSelectCreate(this.getCreateList);
    // },
    // 获取选择的创建人
    getCreaters(val) {
      console.log(val);
      this.getCreateList = val;
      // 将获取到的数据转换成后端需要的数据结构
      this.changeCreateList = []; // 把之前的赋值为空避免重复添加
      val.forEach(item => {
        this.changeCreateList.push({projectuser: {type: 3, userid: item.id}});
      });
      console.log(this.changeCreateList);
    },

    // ==========================================
    // 项目创建人穿梭框
    async openCreated() {
      // console.log('1');
      this.value = [];
      this.changeCreateList = [];
      const res = await getTeachers();
      // console.log(res);
      this.data = res.data;
      this.getCreateList.forEach(item => {
        this.value.push(item.id);
      });
      // console.log(this.value);
      if (this.value.indexOf(1) !== -1) {
        // console.log('1');
        this.getCreateList.forEach(item => {
          if (item.id === 1) {
            this.data.push(item);
          }
        });
      }
      this.showDialog1 = true;
    },
    // 选人弹层确定按钮
    sendRoleList() {
      // console.log(this.value);
      // console.log(this.data);
      this.getCreateList = [];
      for (let i = 0; i < this.value.length; i++) {
        this.changeCreateList.push({
          projectuser: {
            type: 3,
            userid: this.value[i]
          }
        });
        this.data.forEach(item => {
          if (item.id === this.value[i]) {
            this.getCreateList.push(item);
          }
        });
      }
      // console.log(this.changeCreateList);
      // console.log(this.getCreateList);
      this.showDialog1 = false;
    },
    //  选人弹层取消按钮
    cancel() {
      // 关闭对话框
      this.showDialog1 = false;
    }
  },
  components: {
    selectManageRoleVue,
    SelectMembersVue,
    SelectCreater
  }
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  box-shadow: 3px 3px 11px 0px #3d3d3d;
}
/deep/ .el-transfer-panel {
  width: 39%;
  height: 500px;
  .el-transfer-panel__body {
    height: 440px;
  }
  .el-transfer-panel__list {
    height: 390px;
  }
}
/deep/ .el-transfer__buttons {
  width: calc(22% - 60px);
}
.roleBox {
  padding: 20px;
  .btn {
    text-align: center;
    margin-top: 36px;
    padding-bottom: 10px;
    button {
      width: 100px;
      height: 35px;
      background: #e8f8fb;
      border-radius: 4px;
      margin: 0px 42px;
      color: #2fc0e0;
      &:nth-child(2) {
        background: #2fc0e0;
        color: white;
      }
    }
  }
}
.title {
  width: 98%;
  height: 45px;
  margin: 0 auto;
  margin-bottom: 38px;
  position: relative;
  .des {
    width: 440px;
    height: 45px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    .avatar {
      width: 41px;
      height: 41px;
      position: absolute;
      left: 20%;
      top: 15%;
    }
    img {
      width: 45px;
      height: 45px;
    }
    .text {
      margin-left: 20px;
      p {
        margin: 0;
        font-size: 16px;
        font-weight: 400;
        color: #222222;
        line-height: 28px;
      }
      span {
        font-size: 12px;
        font-weight: 400;
        color: #555555;
        line-height: 20px;
      }
    }
    .level {
      align-self: flex-start;
      text-align: center;
      font-size: 12px;
      font-family: SukhumvitSet-Bold, SukhumvitSet;
      font-weight: bold;
      color: #ffffff;
      line-height: 21px;
      font-weight: bold;
      width: 60px;
      height: 21px;
      border-radius: 10px;
      margin-top: 5px;
      margin-left: 20px;
    }
    .LvOne {
      background: #c5f5d1;
    }
    .LvTwo {
      background: #f7cbd2;
    }
    .LvThree {
      background: #cbd5f5;
    }
  }
}
.modify {
  width: auto;
  height: 40px;
  position: absolute;
  top: 6px;
  right: 0;
  button {
    width: 115px;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    border-radius: 4px;
    margin-left: 18px;
    cursor: pointer;
  }
  .cancel {
    background: #e8f8fb;
    color: #2fc0e0;
  }
  .edit {
    background: #2fc0e0;
    color: #ffffff;
    box-shadow: 0 0 5px #2fc0e0;
  }
  .finish {
    background: #2fc0e0;
    color: #ffffff;
    box-shadow: 0 0 5px #2fc0e0;
  }
}
.infotable {
  width: 98%;
  margin: 0 auto;
  margin-bottom: 20px;
  border-left: 1px solid #f1f4ff;
  border-top: 1px solid #f1f4ff;
  span {
    font-size: 14px;
    color: #333;
  }
  table {
    width: 100%;
    margin: 0 auto;
    .choosemember {
      cursor: pointer;
      width: 40px;
      height: 40px;
      margin-left: 10px;
      vertical-align: middle;
    }
    tr {
      td:focus-within {
        box-shadow: inset 0px 1px 4px 0px #2fc0e0,
          inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
          inset -1px 0px 4px 0px #2fc0e0;
      }
      td {
        padding-left: 20px;
        height: 60px;
        text-align: left;
        border-bottom: 1px solid #f1f4ff;
        border-right: 1px solid #f1f4ff;

        input {
          border: none;
          width: 80%;
          height: 80%;
          outline: none;
          transition: all 0.3s;
          border-radius: 5px;
        }

        select {
          border: none;
          width: 65%;
          height: 80%;
          outline: none;
          transition: all 0.3s;
          border-radius: 5px;
        }
        select:hover {
          box-shadow: 2px 2px 4px 0px #2fc0e0;
        }
        .missioner {
          display: flex;
          align-items: center;
          .editspan {
            margin: 0 10px;
            display: inline-block;
            width: 100px;
            height: 40px;
            background: #e8f8fb;
            border-radius: 4px;
            color: #555;
            line-height: 40px;
            text-align: center;
          }
          .missionerinfo {
            display: inline-block;
            text-align: center;
            p {
              font-size: 12px;
              margin: 0;
              color: #555;
            }
            img {
              width: 45px;
              height: 45px;
              border-radius: 50%;
              box-shadow: 1px 1px 3px #d7d7d7;
            }
          }
          .moremissioner {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e8f8fb;
            box-shadow: 1px 1px 3px #d7d7d7;
            border: 3px solid #ffffff;
            color: #e8f8fb;
            text-align: center;
            line-height: 40px;
            span {
              font-size: 12px;
              color: #2fc0e0;
            }
          }
          img {
            width: 70px;
            height: 70px;
            margin: 0 10px;
          }
          .choosemember {
            cursor: pointer;
            width: 40px;
            height: 40px;
          }
        }
        .domany {
          // border: 1px solid #6c59cc;
          width: 150px;
          height: 20px;
          // border-radius: 16px;
          margin: 0 10px;
          // padding: 4px;
          // .many {
          //   display: inline-block;
          //   height: 100%;
          //   background-image: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
          //   border-radius: 12px;
          //   vertical-align: top;
          //   text-align: center;
          //   color: black;
          //   line-height: 24px;
          // }
          // .many1 {
          //   display: inline-block;
          //   height: 100%;
          //   background-image: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
          //   border-radius: 12px;
          //   vertical-align: top;
          //   text-align: center;
          //   color: white;
          //   line-height: 24px;
          // }
        }
        .manystatus {
          display: inline-block;
          font-size: 14px;
        }
        .ongoing {
          color: #ffd167;
        }
        .ongoing::before {
          content: "";
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #ffd167;
          margin-right: 3px;
          box-shadow: 0 0 3px #ffd167;
        }
        .notstart {
          color: #555555;
        }
        .notstart::before {
          content: "";
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #555555;
          margin-right: 3px;
          box-shadow: 0 0 3px #555555;
        }
        .completed {
          color: #3ea528;
        }
        .completed::before {
          content: "";
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #3ea528;
          margin-right: 3px;
          box-shadow: 0 0 3px #3ea528;
        }
      }
    }
  }
}
.phase {
  width: 98%;
  margin: 0 auto;
  margin-bottom: 30px;
  h3 {
    font-size: 14px;
    color: #333333;
  }
  ul {
    height: 75px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
      width: 240px;
      height: 73px;
      text-align: center;
      line-height: 73px;
      font-size: 18px;
      color: #555555;
      border-radius: 8px;
      border: 1px solid #e8f8fb;
    }
    .active-select-li {
      background: #e8f8fb;

      color: #2fc0e0;
    }
    span {
      width: 35px;
      height: 35px;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      line-height: 35px;
      color: #eeeeee;
      background: url("~@/assets/phase1.png") no-repeat center center;
      background-size: 100% 100%;
    }
    .active-select-span {
      background: url("~@/assets/phase2.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
}
input {
  border: none;
  width: 80%;
  height: 80%;
  outline: none;
  transition: all 0.3s;
  border-radius: 5px;
}

select {
  border: none;
  width: 65%;
  height: 80%;
  outline: none;
  transition: all 0.3s;
  border-radius: 5px;
}

// 弹窗样式
.diaheader {
  width: 100%;
  height: 60px;
  background: #f1f5ff;
  text-align: center;
  line-height: 60px;
  color: #333333;
  font-weight: bold;
  font-size: 14px;
}
.diacontentbox {
  padding: 20px;
  box-sizing: border-box;

  .hadchoosenmembers {
    height: 90px;
    width: 100%;
    overflow-x: auto;
    display: flex;
    .choosenmem {
      width: 70px;
      text-align: center;
      p {
        width: 100%;
        height: 15px;
        margin: 0;
        text-align: center;
        font-size: 12px;
        color: #555;
      }
      img {
        width: 50px;
        height: 50px;
        border-radius: 50px;
      }
    }
  }
}
.searchbox {
  margin-top: 15px;
  .inputborder {
    margin: 0 auto;
    width: calc(100% - 40px);
    height: 50px;
    // background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
    border-radius: 25px;
    position: relative;
  }
  .search {
    outline: none;
    width: 100%;
    margin: 0 auto;
    height: 44px;
    border: 1px solid #eeeeee;
    border-radius: 25px;
    background-clip: padding-box;
    text-align: center;
  }
  .icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #2fc0e0;
    border-radius: 50%;
    color: #fff;
    position: absolute;
    right: 5px;
    top: 5px;
  }
}
.diacontent {
  width: 100%;
  height: 350px;
  margin: 0 auto;
  overflow-y: auto;
  ul {
    width: 100%;
    li {
      width: 100%;
      padding: 20px 0;
      display: inline-block;
      border-bottom: 1px solid #f2f2f2;
      height: 60px;
      line-height: 60px;
      display: flex;
      align-items: center;
      position: relative;
      img {
        width: 70px;
        height: 70px;
        margin: 0 10px;
      }
      .memberName {
        margin: 0 20px;
        color: #333333;
        font-size: 14px;
        font-weight: bold;
      }
      .checkBoxs {
        width: 25px;
        height: 25px;
        position: absolute;
        right: 20px;
      }
      div {
        background: #f2f2f2;
        width: 100px;
        height: 40px;
        margin: 0 15px;
        border-radius: 11px;
        text-align: center;
        line-height: 40px;
        color: #555;
        font-size: 14px;
        cursor: pointer;
      }
      .first {
        background: #ffd167;
        color: #fff;
      }
    }
  }
}
select:hover {
  box-shadow: 2px 2px 4px 0px #2fc0e0;
}
/deep/ .el-input__inner {
  border: none;
}
/deep/.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  // width: 45px !important;
  // height: 45px !important;
  background-color: #2fc0e0;
}
.footertab {
  text-align: left;
  margin-top: 20px;
  width: 98%;
  a {
    color: rgb(94, 94, 94);
    font-size: 14px;
    margin: 0 20px;
  }
  .active {
    color: #111;
    font-size: 18px;
    font-weight: bolder;
    position: relative;
    .litline {
      position: absolute;
      bottom: -10px;
      left: 25%;
      display: inline-block;
      width: 35px;
      height: 8px;
      border-radius: 4px;
      background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
    }
  }
}
// 头像样式
/deep/.el-select {
  width: 74px;
  height: 45px;
  border: none;
}
/deep/.el-select-dropdown__item {
  width: 68px !important;
  height: 68px !important;
  border-radius: 7px;
  padding: 0;
  margin: 0 auto;
  position: relative;
}
/deep/.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  // width: 45px !important;
  // height: 45px !important;
  background-color: #2fc0e0;
}
/deep/.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  img {
    width: 45px !important;
    height: 45px !important;
    left: 16% !important;
    top: 17% !important;
  }
}

/deep/ .el-input__inner {
  border: none;
}
/deep/.el-select-dropdown__list {
  height: 420px !important;
}
/deep/.el-select-dropdown__wrap {
  max-height: 430px !important;
  box-shadow: 2px 2px 4px 0px rgba(169, 184, 244, 0.5) !important;
}

/deep/.el-scrollbar__bar.is-vertical {
  display: none !important;
}
// 清除input按钮
/deep/ input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}

// 清除表头
/deep/.el-dialog__header {
  display: none;
}
</style>
